import React from 'react';
import { Flex, WingBlank, WhiteSpace, List,Card, Progress } from 'antd-mobile';

const { Item, Item: { Brief } } = List;
const scoreLabels = ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质'];
let list = [];

export default function ScaleReport({ Report1, Report2, Report3, ...rest }) {
  window.scrollTo(0, 0);
  return (
    <WingBlank size="md">
      <List wrap>
        <Item>
            <Flex justify="center">老年人体质辨识报告</Flex>
            <WhiteSpace/>
            <Flex justify="end">
                <div style={{fontSize: '0.25rem'}}>
                    {rest.createTime}
                </div>
            </Flex>
        </Item>
        <Item extra={null}>
          体质类型：
          <Brief>{Report1}</Brief>
          <WhiteSpace size="lg" />
        </Item>
        <Item extra={null}>
          易发疾病：
          <Brief>{Report2}</Brief>
          <WhiteSpace size="lg" />
        </Item>
        {Report2? 
          Report2.split(';').map((c, i) => {
            list = Report2.split(';');
          }): ''
         }
        <Item >
          体质得分：
          <Brief>
            {scoreLabels && scoreLabels.map((percent, i) => (
                <div key={i}>
                  <div style={{ display: 'inline-block', width: "1.2rem" }}>
                    {scoreLabels[i]}
                  </div>
                  <div style={{ display: 'inline-block', width: "3rem" }}>
                    <Progress position="normal" unfilled="hide" percent={list[i]} />
                  </div>
                  <span style={{ marginLeft: "0.2rem", color: '#aa4929' }}>
                    {list[i]}
                  </span>
                  <WhiteSpace />
                </div>
              ))}
          </Brief>
        </Item>
        {rest.children}
      </List>
    </WingBlank>
  );
}
